var renderTimeout = false;
var renderQue = new Object();

var renderQueAdd = function(fromObj, toObj){
	var queId = fromObj.getAttribute("id") + toObj.getAttribute("id");
	if(!obj(queId)) obj("swarmCanvasLayer").innerHTML += '<canvas id="' + queId + '" style="position:absolute;"></canvas>';
	renderQue[queId] = new Array();
	renderQue[queId][0] = fromObj;
	renderQue[queId][1] = toObj;
};

var renderQueParse = function(){
	var renderStep = objectPop(renderQue);
	if(renderStep){
		connect(renderStep.name, renderStep.value[0], renderStep.value[1]);
		setTimeout("renderQueParse()", 1);
	} else renderTimeout = false;
};

window.onload = function(){
	// rct backgrounds
	setRctChilds("swarmLayer");
	
	// initiate existing connections
	var allNodes = obj("swarmLayer").getElementsByTagName("div");
	for(var n=0; n<allNodes.length; n++){
		var connectionsTo = allNodes[n].getAttribute("connect");
		if(connectionsTo){
			var connections = connectionsTo.split(",");
			for(var t=0; t<connections.length; t++){
				renderQueAdd(allNodes[n], obj(connections[t]));
			}
		};
	};
	renderTimeout = setTimeout("renderQueParse()", 1);
	
	// drag actions
	var onDragStep = function(dragObj){
		// connections from the object
		var connectionsTo = dragObj.getAttribute("connect");
		if(connectionsTo){
			var connections = connectionsTo.split(",");
			for(var t=0; t<connections.length; t++){
				renderQueAdd(dragObj,  obj(connections[t]));
			}
		};
		
		// connections to the object
		var allNodes = obj("swarmLayer").getElementsByTagName("div");
		var draggedId = dragObj.getAttribute("id");
		for(var n=0; n<allNodes.length; n++){
			var connectionsTo = allNodes[n].getAttribute("connect");
			if(connectionsTo){
				var connections = connectionsTo.split(",");
				for(var t=0; t<connections.length; t++){
					if(connections[t] == draggedId){
						renderQueAdd(allNodes[n],  dragObj);
					}
				}
			};
		}
		
		// start render que when not yet running
		if(!renderTimeout) renderTimeout = setTimeout("renderQueParse()", 1);
	};
	
	document.onmousedown = function(e){
		startDrag(e, onDragStep);
		// prevent text selection in IE
		document.onselectstart = function(){return false;};
	    // prevent text selection (except IE)
	    return false;
	};
	
};

var cvMargin = 200;
var connect = function(cvId, fromObj, toObj){

	// coordinates X
	var fromObjX = fromObj.offsetLeft + fromObj.offsetWidth / 2;
	var toObjX = toObj.offsetLeft + toObj.offsetWidth / 2;
	if(fromObjX < toObjX){
		var distanceX = toObjX - fromObjX;
		var cvLeft = fromObjX;
		var startLeft = 0;
		var endLeft = distanceX;
	} else{
		var distanceX = fromObjX - toObjX;
		var cvLeft = toObjX;
		var startLeft = distanceX;
		var endLeft = 0;
	};
	
	// coordinates Y
	var fromObjY = fromObj.offsetTop + fromObj.offsetHeight / 2;
	var toObjY = toObj.offsetTop + toObj.offsetHeight / 2;
	if(fromObjY < toObjY){
		var distanceY = toObjY - fromObjY;
		var cvTop = fromObjY;
		var startTop = 0;
		var endTop = distanceY;
	} else{
		var distanceY = fromObjY - toObjY;
		var cvTop = toObjY;
		var startTop = distanceY;
		var endTop = 0;
	};

	// canvas move, resize
	var cv = obj(cvId);
	cv.style.left = cvLeft - cvMargin + "px";
	cv.style.top = cvTop - cvMargin + "px";
	cv.setAttribute("width", distanceX + (2 * cvMargin) );
	cv.setAttribute("height", distanceY + (2 * cvMargin) );
	// canvas draw
	var ctx = cv.getContext("2d");
	ctx.strokeStyle = "rgba(0,0,0,6)";
	ctx.lineWidth = 0.7;
	bezierTo(ctx, startLeft + cvMargin, startTop + cvMargin, endLeft + cvMargin, endTop + cvMargin, 100);
};
